import  { useRef, useEffect, ReactNode } from "react";
import { createPortal } from "react-dom";

/** 传送门组件
 *
 * 将相应的DOM节点传送到对应的节点
 *
 * 该组件是将DOM节点传送到body上去
 */

interface PortalProps {
  children: JSX.Element;
}

function Portal({ children }: PortalProps):ReactNode {
  // 创建一个dom节点
  const containerRef = useRef<HTMLDivElement | null>(null);

  if (!containerRef.current) {
    containerRef.current = document.createElement("div");
    document.body.appendChild(containerRef.current);
  }
  /** 组件销毁时移除组件*/
  useEffect(() => {
    return () => {
      if (containerRef.current) {
        document.body.removeChild(containerRef.current);
      }
    };
  }, []);

  return createPortal(children, containerRef.current);
}

export default Portal;